<template>
  <div id="ProductTable">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="商品名称"
        width="220"
      >
        <template slot-scope="scope">
          <div style="display: flex">
            <div class="table_left_img_block">
              <img
                width="60px" height="60px" alt=""
                :src="scope.row.avatar | handleImgSize"
                @click.stop="showBigPic(scope.row.avatar)"
              >
            </div>
            <div style="position: relative; flex: 1; padding-left: 10px">
              <span style="display: block; position: absolute; top: 50%; transform: translateY(-50%)">{{scope.row.itemName}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品ID">
      </el-table-column>
      <el-table-column
        prop="releaseDate"
        label="发布时间"
        v-if="state === 1"
        width="154">
      </el-table-column>
      <el-table-column
        label="价格"
        width="120">
        <template slot-scope="scope">
          {{ scope.row | handlePrice }}
        </template>
      </el-table-column>
      <el-table-column
        label="积分价">
        <template slot-scope="scope">
          {{ scope.row.saleItemSpecList | handleCreditPrice }}
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        width="70">
        <template slot-scope="scope">
          {{scope.row.type | handleTypeTxt}}
        </template>
      </el-table-column>
      <el-table-column
        label="已售出"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            type="text" size="small"
            @click="$emit('editProduct', scope.row.id, state)">编辑商品</el-button>
          <el-button
            type="text" size="small"
            @click="$emit('shiftState', scope.row.id, state)"
          >
            {{state | filterState}}
          </el-button>
          <el-button
            v-if="state === 0"
            type="text" size="small"
            @click="$emit('deleteProduct', scope.row.id)"
            style="color: #dd6161;"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="bigPicDialogVis"
    >
      <img width="100%" :src="currentPic" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductIndex',
  props: [
    'tableData', 'state'
  ],
  data () {
    return {
      currentPic: '',
      bigPicDialogVis: false
    }
  },
  methods: {
    showBigPic (picUrl) {
      this.currentPic = picUrl
      window.setTimeout(() => { this.bigPicDialogVis = true }, 200)
    }
  },
  filters: {
    filterState: (value) => {
      switch (value) {
        case 0:
          return '上架'
        case 1:
          return '下架'
      }
    },
    handleImgSize: (value) => {
      return `${value}?imageView2/1/w/60/h/60`
    },
    handleTypeTxt: (value) => {
      let txt = ''
      switch (value) {
        case 0:
          txt = '商品'
          break
        case 1:
          txt = '服务'
          break
        case 2:
          txt = '礼品'
          break
        case 3:
          txt = '兑换券'
          break
      }
      return txt
    },
    handleCreditPrice: value => {
      if (value.length === 0 || !value) {
        return ''
      }
      if (value.length === 1) {
        return value[0].creditPrice
      }
      let arr = []
      for (let item of value) {
        arr.push(item.creditPrice)
      }
      arr = arr.sort()
      if (arr[0] === arr[arr.length - 1]) {
        return arr[0]
      }
      return `${arr[0]} - ${arr[arr.length - 1]}`
    },
    handlePrice: value => {
      const { minDiscountprice, maxDiscountprice } = value
      if (minDiscountprice === 0 && maxDiscountprice !== 0) {
        return `￥0 - ${maxDiscountprice}`
      }
      if (maxDiscountprice === 0) {
        return '￥0'
      }
      if (!minDiscountprice && !maxDiscountprice) {
        return ''
      }
      if (!minDiscountprice) {
        return `￥${maxDiscountprice}`
      }
      if (!maxDiscountprice) {
        return `￥${minDiscountprice}`
      }
      if (minDiscountprice === maxDiscountprice) {
        return `￥${minDiscountprice}`
      }
      return `￥${minDiscountprice} - ${maxDiscountprice}`
    }
  }
}
</script>

<style scoped lang="scss">
  .product_index_main {
    padding: 20px;
  }
  .table_left_img_block {
    img {
      &:hover {
        cursor: pointer;
      }
    }
  }
</style>
